import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

// 1.在这一步中，您将添加一个显示收藏夹内容的新页面（在Flutter中称为路由(route)）
// 您将学习如何在主路由和新路由之间导航（切换页面）。
//在Flutter中，导航器管理应用程序的路由栈。将路由推入（push）到导航器的栈中，将会显示更新为该路由页面。
// 从导航器的栈中弹出（pop）路由，将显示返回到前一个路由。

void main() => runApp(new MyApp()); // =>单行函数或方法的简写

// 该应用程序继承了 StatelessWidget，这将会使应用本身也成为一个widget。
// 在Flutter中，大多数东西都是widget，包括对齐(alignment)、填充(padding)和布局(layout)
class MyApp extends StatelessWidget {


  //widget的主要工作是提供一个build()方法来描述如何根据其他较低级别的widget来显示自己。
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Startup Name Generator',
      theme: new ThemeData(primaryColor: Colors.white),
      home: new RandomWords(),
    );
  }

}


class RandomWords extends StatefulWidget {
  @override
  createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords>{


  final _suggestions = <WordPair>[];
  final _biggerFont = const TextStyle(fontSize: 18.0);

  final _saved = new Set<WordPair>();

  Widget _buildSuggestions(){
    return new ListView.builder(itemBuilder: (context,i){
      if(i.isOdd) return new Divider();

      final index = i ~/ 2;
      if(index >=_suggestions.length){
        // 接着再生成10个单词，然后添加到建议列表
        _suggestions.addAll(generateWordPairs().take(10));
      }

      return _buildRow(_suggestions[index]);
    });
  }
  Widget _buildRow(WordPair pair) {
    final alreadySaved = _saved.contains(pair);

    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(alreadySaved?Icons.favorite:Icons.favorite_border,
      color: alreadySaved?Colors.red:null,),
      onTap: (){
        setState(() {
          if(alreadySaved) {
            _saved.remove(pair);
          }else{
            _saved.add(pair);
          }
        });
      },
    );
  }
// 2.在RandomWordsState的build方法中为AppBar添加一个列表图标。当用户点击列表图标时，包含收藏夹的新路由页面入栈显示。
// 提示: 某些widget属性需要单个widget（child），而其它一些属性，如action，需要一组widgets(children），用方括号[]表示。
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(centerTitle:true,title: new Text('Startup Name Generator',),
      actions: <Widget>[new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved)],),//3.见_pushSaved方法
      body: _buildSuggestions(),
    );
  }
  //4.向RandomWordsState类添加一个 _pushSaved() 方法.
  void _pushSaved() {
    //5.当用户点击导航栏中的列表图标时，建立一个路由并将其推入到导航管理器栈中。此操作会切换页面以显示新路由。
    //新页面的内容在在MaterialPageRoute的builder属性中构建，builder是一个匿名函数。
    //添加Navigator.push调用，这会使路由入栈（以后路由入栈均指推入到导航管理器的栈）
    Navigator.of(context).push(new MaterialPageRoute(builder: (context){
      final tiles = _saved.map( //6.用了es6数组的映射，将其转为listview的item数组
        (pair){
          return new ListTile(
            title:new Text(pair.asPascalCase,style: _biggerFont,)
          );
      });
      final divided = ListTile.divideTiles(context:context,tiles: tiles).toList();
      //7.builder返回一个Scaffold，其中包含名为“Saved Suggestions”的新路由的应用栏。
      // 新路由的body由包含ListTiles行的ListView组成; 每行之间通过一个分隔线分隔。
      return new Scaffold(appBar: new AppBar(title: new Text('Saved Suggestions'),), //最后都是返回一个Scaffold，这是整个页面的内容
      body: new ListView(children: divided,),);
    }));


  }
}